<template>
  <div>
    <el-dialog
      :visible="true"
      title="任务操作日志"
      class="add_case_dialog"
      width="60%"
      :before-close="callOf"
    >
      <el-table
        ref="tasklogform"
        v-loading="listLoading"
        :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column label="序号" width="50px" align="center">
          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column
          v-if="idhidden"
          label="id"
          prop="id"
          align="center"
          width="80"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作类型" width="100px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.task_operate_type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作字段" width="100px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.operate_fields }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字段修改前">
          <template slot-scope="{ row }">
            <span class="before" :title="row.operate_now">{{
              row.operate_old
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字段修改后">
          <template slot-scope="{ row }">
            <span class="after" :title="row.operate_now">{{
              row.operate_now
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作结果" width="100px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.task_operate_result }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" width="100px" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.task_operate_user }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作日志" align="center">
          <template slot-scope="{ row }">
            <span class="operateLog" :title="row.task_operate_log">{{
              row.task_operate_log
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作时间" width="100px" align="center">
          <template slot-scope="{ row }">
            <span>
              {{
                row.task_operate_time | parseTime("{y}-{m}-{d} {h}:{i}")
              }}</span>
          </template>
        </el-table-column>
      </el-table>
      <Paginationlog
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page_num"
        :limit.sync="listQuery.page_per"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>
<script>
import Paginationlog from '@/components/Pagination'

export default {
  name: 'Task',
  components: {
    Paginationlog
  },
  props: {
    // dialogAdd: Boolean,
    sizeForms: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listLoading: true,
      list: null,
      total: 0,
      idhidden: false,
      listQuery: {
        page_num: 1,
        page_per: 10
      }
    }
  },
  watch: {
    sizeForms() {
      this.listQuery = { ...this.listQuery, ...this.sizeForms }
      this.list = this.listQuery.items
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // dialogFormAdd(form) {
    // },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    callOf() {
      this.$emit('closePop')
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    },
    getList(e) {
      this.$emit('changeLogList', e)
      this.listQuery = { ...this.listQuery, ...this.sizeForms }
      this.listLoading = true
      this.list = this.listQuery.items
      this.total = this.listQuery.total
      setTimeout(() => {
        this.listLoading = false
      }, 0.5 * 1000)
    }
  }
}
</script>
<style>
.add {
  width: 100%;
}
.before,
.after,
.operateLog {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
